<template>
  <div class="homePage">
    <!-- 1.背景图片 -->
    <div class="firstBg"><img src="./images/bg1.jpg" /></div>
    <!-- 2.轮播图1 -->
    <div class="firstBanner">
      <div class="title">MIND SHOW</div>
      <Swiper :bannerList="firstBanner" :navBtn="true" :pagBtn="true"></Swiper>
    </div>
    <!-- 3.四张照片展示 -->
    <div class="shopGoods">
      <div class="title">MIND MORE</div>
      <div class="container itemBigBox">
        <div class="row">
          <div
            class="col-6 itemBox"
            v-for="(fourImg, index) in shopGoods"
            :key="index"
          >
            <img :src="fourImg" />
          </div>
        </div>
      </div>
    </div>
    <!-- 4.视频 -->
    <div class="secondBg">
      <div class="title">MIND RECOMMAND</div>
      <video
        width="100%"
        muted
        controls
        src="https://secure.widemotion.cn/diorparfums/projects/diorparfums_xmas_main_film_2022_169/videos/20220914094547_1280x720_3500_b1026a2b-c2e7-41b7-9329-5182ef40d045.mp4"
        autoplay
        loop
      ></video>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "home",
  data() {
    return {
      imgNum: 1,
    };
  },
  mounted() {
    this.$store.dispatch("getImgInfo");
  },
  computed: {
    ...mapGetters(["firstBanner", "shopGoods"]),
  },
};
</script>

<style lang="less" scoped>
.title {
  margin: 30px auto;
  text-align: center;
  font-size: 4.5vw;
}
.firstBg {
  img {
    width: 100%;
    height: 100%;
  }
}
.firstBanner {
  .swiper-container {
    width: 80%;
    height: 80%;
  }
}
.shopGoods {
  width: 82%;
  margin: auto;
  img {
    width: 90%;
    margin: 0 5%;
  }
}
.secondBg {
  width: 100%;
  margin-bottom: 60px;
}
</style>
